{% extends "while_base.html" %}

{%block style %}
<link href="{{ MEDIA_URL }}css/style_lowrated.css" rel="stylesheet" type="text/css" media="screen" />
{% endblock %}

{% block menu %}
				<li><a href="/">Today</a></li>
				<li><a href="/fame/">Hall of Fame</a></li>
				<li  class="current_page_item"><a href="/shame/">Hall of Shame</a></li>
				<li ><a href="/about/" class="last">About Us</a></li>
				{% endblock %}


{% block page %}
	<hr />
	<div id="page-bgtop">
		<div id="content">
			<div class="post">
				<div id="logo">
					<h1>most low-blowed WYW's:</h1>
				</div>					
				<div class="entry">
				</div>
			</div>
			
			{% for post in posts %}
			<div class="post">
				<p class="meta">{{post.datestamp|date:"l, F j, Y, f A"}} <span style="float: right;">Posted by <span class="author">{{post.gender}}</span> about <span class="author">{{post.adjective}} {{post.noun}}</span>{%if not post.campus_aff %} at <span class="author">{{post.campus}}</span>{%endif%}</span></p>
				<div style="float: left;font-size: 27px;padding: 14px 20px 10px 25px;">
				{{forloop.counter}}.
				</div>
				<h2 class="title"><a href="/wyw/{{post.id}}">While You Were {{post.whileyou}}... </a></h2>
				<div class="entry">
					<p>{{post.description}} </p>
				</div>
	<div class="links"><a href="/wyw/{{post.id}}"><span style="text-transform: uppercase; float: left;padding-left: 67px;padding-top: 4px;font-size: 10px;">{{post.comments}} comment{%if not post.comments == 1 %}s{%endif%}</span></a><a id="clickh{{post.id}}" href="Javascript: void(0);">High Five! (<span id="h{{post.id}}">{{post.five}}</span>)</a>&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;<a id="clickl{{post.id}}" href="Javascript: void(0);">Low Blow... (<span id="l{{post.id}}">{{post.low}}</span>)</a>
				</div>
				</div>
				<script type="text/javascript">
      $(function(){
          $("#clickh{{post.id}}").click(function(){
              $("#h{{post.id}}").load("/high/{{post.id}}/");
          });
      });
      $(function(){
          $("#clickl{{post.id}}").click(function(){
              $("#l{{post.id}}").load("/low/{{post.id}}/");
          });
      });
  </script>
				{%  endfor %}
		</div>
		<div id="sidebar">
			<a href="/post"><img src="{{ MEDIA_URL }}img/post.jpg" border="0"></a>
		</div>
		<!-- end #sidebar -->
		<div style="clear: both;">&nbsp;</div>
	</div>
	
{% endblock %}